<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input{
				font-size:26px;
				margin-top: 20px;
				}
			.inputb{
				font-size:26px;
				margin-top: 20px;
				background-color: #0000FF;
				color: white;
			}
			body{
				background-image: url(images/grassland.png);
				}
			#mytank{
				position: absolute;
				left:10px;
				top:100px;
				}
		</style>
	</head>
	<body>
		<input type="button" onclick="show1()" value="按钮一"/>
		<input type="button" onclick="show2()" value="按钮二" />
		<input type="button" onclick="show3()" onmouseover="over4()" onmouseout="out5()" value="按钮三" />
		<hr />
		<img id="mytank" src="images/right.png"/>
		<script type="text/javascript">
			//179000516 王德令
			var mytank = document.getElementById('mytank');
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
					//右
					if(e.keyCode == 39){
						mytank.setAttribute("src","images/right.png");
						mytank.style.left = (mytank.offsetLeft+10)+'px'; 
					}
					//下
					if(e.keyCode == 40){
						mytank.setAttribute("src","images/down.png");
						mytank.style.top = (mytank.offsetTop+10)+'px'; 
					}
					//左
					if(e.keyCode == 37){
						mytank.setAttribute("src","images/left.png");
						if(mytank.offsetLeft>10){
							mytank.style.left = (mytank.offsetLeft-10)+'px'; 
						}
					}
					//上
					if(e.keyCode == 38){
						mytank.setAttribute("src","images/up.png");
						if(mytank.offsetTop>100){
							mytank.style.top = (mytank.offsetTop-10)+'px'; 
						}
					}
				});		
			function show1(){
				alert("javascript事件测试一");
			}
			function show2(){
				let btn2 = document.querySelectorAll("input")[1];
				btn2.addEventListener("dblclick",()=>btn2.value="按钮二测试");
			}
			function show3(){
				alert("javascript事件测试三");
			}
			function over4(){
				let btn3 = document.querySelectorAll("input")[2];
				btn3.style.backgroundColor="blue";
				btn3.style.color="white";
			}
			function out5(){
				let btn3 = document.querySelectorAll("input")[2];
				btn3.style.backgroundColor="";
				btn3.style.color="";
			}
		</script>
	</body>
</html>